<script setup>
import { reactive, ref } from "vue";
import { Button } from "ant-design-vue";
import ArticleCard from "./ArticleCard.vue";
import HelloWorld from "./components/HelloWorld.vue"; //此处使用 Vetur 插件会报红
const data: DataItem[] = [
  {
    title: "Ant Design Title 1",
  },
  {
    title: "Ant Design Title 2",
  },
  {
    title: "Ant Design Title 3",
  },
  {
    title: "Ant Design Title 4",
  },
];
reactive({
  data: data,
});
</script>

<template>
  <a-list item-layout="horizontal" :data-source="data">
    <template #renderItem="{ item }">
      <a-list-item>
        <ArticleCard :item="item"></ArticleCard>
      </a-list-item>
    </template>
  </a-list>

  <a-button>Add</a-button>
</template>

<style scoped>
a {
  color: #42b983;
}
</style>
